<template>
  <div class="fenye" id="wrap">
    <ul class="message_content" id="list">
      <li class="data" v-for="item in list" ref="list" :key="item.id">
        <div style="flex:3" class="three" >{{item.feesName}}</div>
        <div style="flex:3;text-align: center;">
          <span style="color:#06FFFF" class="three">{{item.amount}}</span>元
        </div>
        <div style="flex:3" class="three">{{item.orgName}}</div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
      // 列表数据

      list: [],
    };
  },
  created(){
this.getConsumption()
  },
  methods:{
getConsumption(){
  this.Api.QueryConsumption().then((res)=>{
  
    this.list=res.data.records
  })
}
  }
};
</script>
<style lang="less" scoped>
#wrap {
  height: 250px;
  overflow: hidden;
  position: relative;
}
.three {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#list {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
   -webkit-animation: 10s move infinite linear;
  width: 100%;
  
}
.data {
  display: flex;
  padding: 0 16px;
  background: rgba(10, 70, 242, 0.2);
  height: 45px;
  line-height: 45px;
  font-size: 19px;
  color: white;
}
.data:nth-child(odd) {
  background:  #020B8A;
}
#wrap:hover #list {
  -webkit-animation-play-state: paused;
}
@-webkit-keyframes move {
  0% {
    top: 0;
  }

  100% {
    transform: translateY(-50%);
  }
}
</style>